<template>
  <div class="editor-form-item" :style="styles">
    <label v-if="label != ''" class="editor-form-label" :class="!hideAfter?'after':''">{{ label }}<span class="text-grey ml5" v-if="desc != ''">({{ desc }})</span></label>
    <slot></slot>
  </div>
</template>
      <script lang="ts">
export default {
  name: "storeDiyFormItem",
};
</script>
      <script  lang="ts" setup >
      import { computed ,StyleValue } from 'vue';

const props = withDefaults(
  defineProps<{
    label?: string;
    desc?: string;
    hideAfter?:boolean;
    marginBotton?:boolean;
  }>(),
  {
    label: "",
    desc: "",
    hideAfter:false,
    marginBotton:true
  }
);

const styles = computed<StyleValue>(() => {
  return [
    props.marginBotton ? `margin-bottom: 20px` : ""
  ];
});
</script>
    
    <style scoped>
.editor-form-item {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.editor-form-item .editor-form-label {
  display: block;
  font-weight: 400;
  line-height: 40px;
  margin-right: 16px;
  white-space: nowrap;
  width: 90px;
  position: relative;
  margin-left: 10px;
  font-size: 12px;
}
.editor-form-item .editor-form-label.after::after{
  content: "";
  height: 12px;
  width: 3px;
  background: var(--base-default);
  position: absolute;
  left: -10px;
  top: 14px;
}
</style>